<template>
  <div class="section-album-wrapper f fd-col" ref="wrapperRef">
    <div class="section-album" ref="sectionAlbumRef">
      <slot>
        <transition v-if="!!isShowTooltip || !!$slots['tooltip']" name="album-tooltip">
          <div v-show="!!isShowTooltipReal" :class="`section-album__tooltip-container f-sz-${parseInt(fontSizeFn(16).toString())} line-2-ellipsis w-100p`">
            <slot name="tooltip">{{ tooltipMessage }}</slot>
          </div>
        </transition>
        <div class="section-album__right-top-corner">
          <slot name="right-top-corner">
            <div v-show="!isShowTooltipReal && (!!isShowTooltip || !!$slots['tooltip'])" class="f ai-c">
              <n-icon :size="fontSizeFn(14)" :component="IosPlay" :color="rightTopCornerIconColor" />
              <span v-if="!!formattedCount" :class="`f-sz-${parseInt(fontSizeFn(14).toString())} ml-0`">
                <n-number-animation :from="0" :to="formattedCount" />
                <span v-if="!!formattedCountUnit">{{ formattedCountUnit }}</span>
              </span>
            </div>
          </slot>
        </div>
        <div class="section-album__main-content w-100p h-100p">
          <slot name="main-content f jc-c ai-c">
            <img v-img-lazy="src" />
          </slot>
        </div>
        <transition v-if="!!$slots['right-bottom-corner'] || isHoverShowRightBottomCorner" name="album-right-bottom-corner">
          <div v-show="!!isShowRightBottomCornerReal" class="section-album__right-corner">
            <slot name="right-bottom-corner">
              <n-icon-wrapper :size="fontSizeFn(30)" :border-radius="fontSizeFn(15)" :color="rightBottomCornerIconBackgroundColor" class="f ai-c jc-c">
                <n-icon :size="fontSizeFn(24)" :component="IosPlay" :color="rightBottomCornerIconColor" />
              </n-icon-wrapper>
            </slot>
          </div>
        </transition>
      </slot>
    </div>
    <div :class="`section-album__main-title line-2-ellipsis f-sz-${parseInt(fontSizeFn(14).toString())}`">
      <slot name="main-title">{{ mainTitle }}</slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  import { useTimeout, useMouseInElement, useElementBounding } from '@vueuse/core';
  import type { MaybeElement } from '@vueuse/core';
  import { useDesignSettingStoreOut } from '@/stores/modules/designSetting';
  import { IosPlay } from '@vicons/ionicons4';
  import { formatCount } from '@/utils';

  interface Props {
    wrapperDefaultWidth?: string;
    isShowTooltip?: boolean;
    hoverShowTooltipDuration?: number;
    tooltipMessage?: string;
    isHoverShowRightBottomCorner?: boolean;
    hoverShowRightBottomCornerDuration?: number;
    // img src
    src?: string;
    // object-fit
    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    mainTitle?: string;
    playCount?: number;
  }

  const props = withDefaults(defineProps<Props>(), {
    wrapperDefaultWidth: '256px',
    isShowTooltip: false,
    hoverShowTooltipDuration: 1000,
    tooltipMessage: '',
    isHoverShowRightBottomCorner: true,
    hoverShowRightBottomCornerDuration: 500,
    src: '',
    fit: 'cover',
    mainTitle: '',
    playCount: 0,
  });

  const wrapperDefaultWidth = props.wrapperDefaultWidth;
  const slots = useSlots();
  const designSettingStore = useDesignSettingStoreOut();
  const { articleConfig } = storeToRefs(designSettingStore);

  const wrapperRef = ref<null | MaybeElement>(null);
  const { width: wrapperWidth } = useElementBounding(wrapperRef);
  const sectionAlbumRef = ref<null | MaybeElement>(null);
  const { isOutside } = useMouseInElement(sectionAlbumRef as unknown as MaybeElement);
  const {
    ready: isShowTooltipReady,
    start: showTooltipReadyStart,
    stop: showTooltipReadyStop,
  } = useTimeout(props.hoverShowTooltipDuration, {
    controls: true,
    callback: () => showTooltipReadyStop(),
  });
  const isShowTooltipReal = computed(() => (props.isShowTooltip || !!slots['tooltip']) && isShowTooltipReady.value && !isOutside.value);

  const {
    ready: isShowRightBottomCornerReady,
    start: showRightBottomCornerReadyStart,
    stop: showRightBottomCornerReadyStop,
  } = useTimeout(props.hoverShowRightBottomCornerDuration, {
    controls: true,
    callback: () => showRightBottomCornerReadyStop(),
  });
  const isShowRightBottomCornerReal = computed(
    () => (props.isHoverShowRightBottomCorner || !!slots['right-bottom-corner']) && isShowRightBottomCornerReady.value && !isOutside.value
  );

  const formattedCount = computed(() => parseFloat(formatCount(props.playCount)));
  const formattedCountUnit = computed(() => formatCount(props.playCount).slice(formattedCount.value.toString().length));
  // 样式
  const sectionStyle = computed(() => ({ ...articleConfig.value.musicDiscovery.section }));
  const recommendedPlaylistAlbumStyle = computed(() => ({
    ...(sectionStyle.value?.RecommendedPlaylistAlbum || { tooltipBackgroundColor: 'red', tooltipFontColor: 'green' }),
  }));
  const tooltipBackgroundColor = computed(() => recommendedPlaylistAlbumStyle.value.tooltipBackgroundColor);
  const tooltipFontColor = computed(() => recommendedPlaylistAlbumStyle.value.tooltipFontColor);
  const rightBottomCornerIconBackgroundColor = computed(() => recommendedPlaylistAlbumStyle.value.rightBottomCornerIconBackgroundColor);
  const rightBottomCornerIconColor = computed(() => recommendedPlaylistAlbumStyle.value.rightBottomCornerIconColor);
  const mainTitleFontColor = computed(() => recommendedPlaylistAlbumStyle.value.mainTitleFontColor);
  const rightTopCornerIconColor = computed(() => recommendedPlaylistAlbumStyle.value.rightTopCornerIconColor);
  const rightTopCornerFontColor = computed(() => recommendedPlaylistAlbumStyle.value.rightTopCornerFontColor);

  const iconSizeFn = (size) => (wrapperWidth.value / parseFloat(wrapperDefaultWidth)) * size;
  const fontSizeFn = (size) => (iconSizeFn(size) < 12 ? 12 : iconSizeFn(size));

  watch(
    isOutside,
    (v) => {
      !v && showTooltipReadyStart();
      !v && showRightBottomCornerReadyStart();
    },
    { immediate: true }
  );
</script>

<style lang="scss">
  .section-album {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    &:hover {
      box-shadow: var(--shadow-active);
    }

    &-wrapper {
      width: v-bind(wrapperDefaultWidth);
      cursor: pointer;
      --shadow: 0 15px 20px 0 #00000026;
      --shadow-active: 0 5px 5px 0 #00000026;
    }

    &__tooltip-container {
      position: absolute;
      left: 0;
      top: 0;
      padding: 10px;
      background-color: v-bind(tooltipBackgroundColor);
      color: v-bind(tooltipFontColor);
    }

    &__right-top-corner {
      position: absolute;
      right: 10px;
      top: 10px;
      color: v-bind(rightTopCornerFontColor);
    }

    &__main-content {
      img {
        width: 100%;
        object-fit: v-bind(fit);
      }
    }

    &__right-corner {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    &__main-title {
      font-size: 18px;
      color: v-bind(mainTitleFontColor);
      line-height: 1.8;
    }
  }

  // 过渡类
  .album-tooltip-enter-active,
  .album-tooltip-leave-active {
    transition: all 0.5s ease;
  }

  .album-tooltip-enter-from,
  .album-tooltip-leave-to {
    transform: translateY(-100%);
    opacity: 0;
  }

  .album-right-bottom-corner-enter-active,
  .album-right-bottom-corner-leave-active {
    transition: all 0.5s ease;
  }

  .album-right-bottom-corner-enter-from,
  .album-right-bottom-corner-leave-to {
    opacity: 0;
  }
</style>
